<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Examples -- Really Simple Validation for jQuery .</title>

    <meta name="keyword" content=""/>
    <meta name="description" content=""/>
    <meta name="copyright" content="Copyright 1994-2010 Motorola, Inc. All Rights Reserved."/>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.rsv-2.5.1.js" type="text/javascript"></script>
<script type="text/javascript">

  // a custom onComplete handler to prevent form submits for the demo
  function myOnComplete()
  {
    alert("The form validates! (normally, it would submit the form here).");
    return false;
  }

    // a custom validation function
function checkIsPrime()
{
  if (!document.getElementById("prime").value)
    return [[document.getElementById("prime"), "Please enter a prime number under 100."]];

  var prime_nums_str = "1|2|3|5|7|11|13|17|19|23|29|31|37|41|43|47|53|59|61|67|71|73|79|83|89|97";
  var prime_numbers = prime_nums_str.split("|");

  var val = document.getElementById("prime").value;

  var is_valid_num = false;
  for (i=0; i<prime_numbers.length; i++)
  {
    if (prime_numbers[i] == val)
      is_valid_num = true;
  }

  if (!is_valid_num)
  {
    var field = document.getElementById("prime");
    return [[field, "Please enter a prime number under 100."]];
  }

  return true;
}

$(document).ready(function() {
    $("#demo_form6").RSV({
      onCompleteHandler: myOnComplete,
      errorFieldClass: "errorFieldDemo6",
      displayType: "display-html",
      errorHTMLItemBullet: "&#8212; ",
        rules: [
          "function,checkIsPrime"
        ]
    });
}); </script>

    <style type="text/css">
    /* these are the various classes used to style the demo error fields */
    .errorField {
      background-color: #990000;
      color: white;
    }
    .errorFieldDemo2 {
      background-color: #ffffcc;
      color: #990000;
    }
    .errorFieldDemo5 {
      background-color: #ffffcc;
      border: 1px solid #aa0000;
      color: #aa0000;
    }
    .errorFieldDemo6 {
      background-color: green;
      color: yellow;
    }
    </style>
  </head>
  <body>
<p class="subtitle blue">#6: Custom validation rule</p>

    <p>
      RSV provides functions for most of the common validation tasks, like checking a field is required,
      validating an email address, checking it's an integer, etc. but sometimes you need to define
      your own rules. This example shows you how to make up your own pass it to RSV.
    </p>

        <div id="rsvErrors"></div>

    <form action="" method="post" id="demo_form6">

      <table class="demoTable" cellpadding="0" cellspacing="1">
      <tr>
        <th width="200">Enter a prime number under 100:</th>
        <td><input type="text" name="prime" id="prime" /></td>
      </tr>
      </table>

      <p><input type="submit" value="SUBMIT" /></p>

    </form>
  </body>
</html>
